<template>
  <div class="emoji">
    <el-popover width="500" placement="top-start" trigger="click" v-model="show" popper-class="emoji">
      <div class="emoji-list">
        <section v-for="(item, keyIndex) in emoji" :key="keyIndex" class="emoji-list-item" @click="insertEmoji(item)">
          <span>
            {{item}}
          </span>
        </section>
      </div>
      <img slot="reference" src="./emoji.svg" alt="" class="emoji-avatar" @click="show = true">
    </el-popover>    
  </div>
</template>

<script>
export default {
  name: 'emoji',
  data() {
    return {
      show: false,
      emoji: ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙', 
      '😚', '☺️', '🙂', '🤗', '🤩', '🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪',
      '😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖', '😞',
      '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '🤯', '😬', '😰', '😱', '😳', '🤪', '😵', '😡', '😠', '🤬',
      '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '😇', '🤠', '🤡', '🤥', '🤫', '🤭', '🧐', '🤓', '✊', '✋', '✌', '👊', 
      '👍', '☝', '👆', '👇', '👈', '👉', '👋', '👏', '👌', '👎', '👐']
    }
  },
  methods: {
    insertEmoji(d){
      this.$emit('chooseEmoji', d);
      this.show = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.emoji{
  display: inline-block;
  .emoji-avatar{
    width: 24px;
    height: 24px;
  }
  .emoji-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .emoji-list-item{
      display: inline-table;
      padding: 4px;   
      width: 30px;   
      cursor: pointer;
      text-align: center;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      &:hover{
        background: #dddddd;
      }
      span{
        font-size: 20px;
        line-height: 30px;
      }
    }
  }
}
</style>